<template>
  <div class="film-card"  @click="gotoDetail(film.movieId)">
    <div class="film-img">
      <img :src="film.imgSrc">
    </div>
    <div class="film-outline">
      <div class="content">
        <p class="title">
          <span>{{film.cname}}</span>
        </p>
        <div class="detail">
            <p class="score" v-if='film.status==="0"'>观众评分：<span class="score-show">{{film.score}}</span></p>
            <p class="score" v-if='film.status==="2"'><span class="score-show">{{film.wannerNum}}</span>人想看</p>
            <p class="actors">主演：<span v-for="(actor,index) in film.actors" :key="index">{{actor.actorName}}<span v-if='index !== film.actors.length-1'>,</span></span></p>
            <p class="show-info" v-if='film.status==="0"'>今天2家电影院放映19场</p>
            <p class="show-info" v-if='film.status==="2"'>{{film.releaseDate}}</p>
        </div>
      </div>
      <div class="buy" :class="{'buy-pre':film.status==='2'}">
        <span v-if='film.status==="0"'>购买</span>
        <span v-if='film.status==="2"'>预售</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    film: Object
  },
  methods: {
    gotoDetail (movieId) {
      console.log('/film/detail/' + movieId)
      this.$router.push('/film/detail/' + movieId)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../../styles/mixins/utils';
  .film-card{
    position: relative;
    padding: 21px 30px;
    height: 227px;
    display: flex;
    overflow: hidden;
    &::after{
      content: '';
      position: absolute;
      bottom: 0;
      right: -177px;
      width: 100%;
      height: 1px;
      background: #e1e1e1;
      transform:scale(1,.5);
      z-index: 5;
    }
    .film-img{
      width: 128px;
      height: 178px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .film-outline{
      flex: 1;
      padding-left: 23px;
      .content{
        font-size: 25px;
        .title{
          line-height: 45px;
          font-size: 30px;
          font-weight: bold;
          span{
            display: inline-block;
            width: 290px;
            @include utils-ellipsis;
          }
        }
        .detail{
          line-height: 40px;
          color:#666;
          .score{
            &-show{
              color: #faaf00;
              font-weight: bold;
            }
          }
          .actors{
            width: 400px;
            @include utils-ellipsis;
          }
          .show-info{
            @include utils-ellipsis;
          }
        }
      }
      .buy{
        position: absolute;
        right: 60px;
        top: 87px;
        width: 94px;
        height: 53px;
        line-height: 53px;
        text-align: center;
        color: #fff;
        border-radius: 10%;
        background: #f03d37;
        &-pre{
          background: #3c9fe6
        }
      }
    }
  }
</style>
